@import '../bootstrap'
@import '../theme'

/** Themes */
date-picker($material)
  .picker--date__years
    li
      color: $material.text.primary

  .picker--date__header-selector-date
    strong:not(:hover)
      color: $material.text.primary !important

theme(date-picker, "picker--date")

.picker--date__table
  .btn.btn--active
    color: #fff

/** Years */
.picker--date__years
  font-size: 16px
  font-weight: 400
  list-style-type: none
  max-height: 290px
  overflow: auto
  padding: 0
  text-align: center

  li
    cursor: pointer
    padding: 8px 0
    transition: none

    &.active
      font-size: 24px
      font-weight: 500
      padding: 10px 0

    &:hover
      background: rgba(0, 0, 0, 0.12)

/** Title */
.picker--date__title
  justify-content: space-between
  flex-direction: column
  flex-wrap: wrap

  &-year
    align-items: center
    display: inline-flex
    font-size: 14px

  &-date
    font-size: 34px
    text-align: left

    > div
      position: relative

  &-year, &-date
    font-weight: 500
    transition: $primary-transition
    width: 100%

    &:not(.active)
      cursor: pointer

/** Header */
.picker--date__header
  padding: 4px 16px

  &-selector
    align-items: center
    display: flex
    justify-content: space-between
    position: relative

    .btn
      margin: 0

    .icon
      cursor: pointer
      user-select: none

    &-date
      flex: 1
      text-align: center
      position: relative
      overflow: hidden

      strong
        cursor: pointer
        transition: $primary-transition
        display: block
        width: 100%

.picker--date
  .btn
    z-index: auto

  &__table
    position: relative

  table
    transition: $primary-transition
    top: 0
    table-layout: fixed

    th
      padding: 8px 0
      font-weight: 600
      font-size: 12px

    th, td
      text-align: center
      width: 45px

    .btn
      margin: 0
      height: 32px
      width: 32px

.picker--month__table
  table
    width: 100%

    td
      width: 33.333333%
      height: 56px
      vertical-align: middle
